import { defineComponent } from "vue";
import { useRouter } from "vue-router";
import ParticleBackground from "../../components/ParticleBackground";
import TacticalMap from "./components/TacticalMap";
import ForceDeployment from "./components/ForceDeployment";
import MissionList from "./components/MissionList";
import AlertPanel from "./components/AlertPanel";
import EquipmentRadar from "./components/EquipmentRadar";
import "./index.css";

export default defineComponent({
  name: "CommandCenter",
  setup() {
    const router = useRouter();

    const goBack = () => {
      router.push("/");
    };

    return () => (
      <div class="command-center">
        <ParticleBackground />

        <div class="command-center__bg">
          <div class="command-center__bg-grid"></div>
          <div class="command-center__bg-glow command-center__bg-glow--1"></div>
          <div class="command-center__bg-glow command-center__bg-glow--2"></div>
        </div>

        <header class="command-center__header">
          <div class="command-center__back" onClick={goBack}>
            ← 返回
          </div>
          <h1 class="command-center__title">作战指挥中心</h1>
          <div class="command-center__time">
            {new Date().toLocaleString("zh-CN")}
          </div>
        </header>

        <div class="command-center__content">
          {/* 顶部区域 */}
          <div class="command-center__top">
            <div class="command-center__mission">
              <MissionList />
            </div>
            <div class="command-center__map">
              <TacticalMap />
            </div>
            <div class="command-center__alert">
              <AlertPanel />
            </div>
          </div>

          {/* 底部区域 */}
          <div class="command-center__bottom">
            <div class="command-center__force">
              <ForceDeployment />
            </div>
            <div class="command-center__radar">
              <EquipmentRadar />
            </div>
          </div>
        </div>

        <footer class="command-center__footer">
          <p>机密信息 | 仅限授权人员访问 | 实时更新</p>
        </footer>
      </div>
    );
  },
});
